<template>
  <div class="wrapper">
    <p>热门城市</p>
     <div class="hot-city" v-if="hotCityList.length>0">
      <ul >
        <li v-for="(data,index) in getData(hotCityList)" :key="index" @click="itemClick(data)">{{ data.name }}</li>
      </ul>
    </div>   
  </div>
</template>
<script>
import {mapMutations} from 'vuex';
export default {
  methods: {
    ...mapMutations("CinemaModule", ["setCinemasList"]),
    itemClick(city) {
      this.setCinemasList([]);
      this.$store.commit("cityName", city.name);
      this.$store.commit("cityId", city.cityId);
      this.$router.back();
    },
    getData(data){
      return data
        .map((item) => item.cityNameArray)
        .reduce((item1, item2) => item1.concat(item2))
        .filter((city) => {
          return (
            city.name==="北京"|| city.name==="上海"|| city.name==="广州"|| city.name==="深圳"
          );
        });
    }
  },
  props:{
    hotCityList:{
      type:Array,
      default:()=>{return []}
    }
  },
  mounted(){
      
  }
};
</script>
<style lang="less" scoped>
.wrapper {
  p {
    font-size: 13px;
    color: #797d82;
    margin-left: 15px;
    margin-bottom: 10px;
  }
  .hot-city {
    ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-left: 20px;
      li {
        height: 30px;
        background-color: #f4f4f4;
        line-height: 30px;
        width: 100px;
        border-radius: 3px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 10px 7.5px;
        text-align: center;
        font-size: 14px;
        color: #191a1b;
      }
    }
  }
}
</style>